<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!--引入bootstrap核心样式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <h1 class="text-center" style="margin-top:70px">用户登录</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名：</label>
                        <input type="text" class="form-control" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密 码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">重复密码</label>
                        <input type="password" class="form-control" id="repassword" placeholder="重复上面的密码">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">昵称:</label>
                        <input type="text" class="form-control" id="nickname" placeholder="请输入昵称">
                    </div>
                    <div class="clearfix"></div>
                    <button class="btn btn-danger col-sm-6" style="margin-top:10px;">注册</button>
                </form>
            </div>

        </div>

    </div>
    <script src="../utils.js"></script>

    <script>
        const formele = document.querySelector('form');

        const username = formele.querySelector('#username');
        const password = formele.querySelector('#password');
        const repassword = formele.querySelector('#repassword');
        const nickname = formele.querySelector('#nickname');

        // 表单的提交 和 reset 必须绑定在form上  否则不生效  

        formele.addEventListener('submit', async e =>{
            e.preventDefault();//阻止默认提交行为 
            //采集用户输入的信息 
            const info = {
                username:username.value,
                password:password.value,
                rpassword:repassword.value,
                nickname:nickname.value,
            }


           const res =  await myajax({
                url:'http://localhost:8080/users/register',
                method:'post',
                data:info,
                dataType:'json'

           })

           if(res.code !== 1){
                alert('注册失败');
           }

           alert('注册成功');
           window.location.href = './denglu.html';
        });

    </script>
</body>

</html>